<ion-header>

  <ion-navbar>
    <ion-title>我的矿机</ion-title>
    <ion-buttons end>
      <button ion-button [navPush]="'MillsPage'">
        <ion-icon name="md-cart" class="mr-5"></ion-icon>
        矿机
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>
<ion-content>
  <div padding>
    <div class="mill">
      <div class="machine" [ngClass]="{'animate': myMiner?.state === minerState.working}">
        <div class="rotate"></div>
        <div class="twinkle"></div>
      </div>
    </div>
    <ng-container *ngIf="!isNormal">
      <p class="text-center">您还没有购买矿机 <br>点击右上角购买矿机就能挖矿啦</p>
    </ng-container>
    <ng-container *ngIf="myMiner?.state === minerState.stop">
      <p class="text-center">矿机已停止，您可以选择复投激活矿机</p>
    </ng-container>
    <ng-container *ngIf="isNormal">
      <div class="mt-20">
        <!--<p>待收取：
          <span *ngIf="myMiner?.userJlb?.digInJlbState===digState.digOut">{{(myMiner?.userJlb?.digInJlb ||0) | number: '1.2-2'}}</span>
          <span *ngIf="myMiner?.userJlb?.digInJlbState!==digState.digOut">0.00</span> JLB
        </p>-->
        <p>日收益：{{(myMiner?.userJlb?.digInJlb ||0) | number: '1.2-2'}} JLB</p>
        <p>矿机算力：{{myMiner?.power}}</p>
        <p>累计获得：{{(myMiner?.userJlb?.digInTotalJlb || 0) | number: '1.2-2'}} JLB</p>
        <p>挖矿上限：{{(myMiner?.minerItem?.upperLimit || 0) | number: '1.2-2'}} JLB</p>
      </div>
      <button ion-button color="secondary" block *ngIf="myMiner?.state === minerState.stop && !isReactiveMill"
              (click)="optional('isReactiveMill')">复投激活
      </button>
      <button ion-button color="secondary" block *ngIf="myMiner?.state === minerState.working && !isUpgradeMill"
              (click)="optional('isUpgradeMill')">升级
      </button>
    </ng-container>
  </div>

  <ng-container *ngIf="isUpgradeMill || isReactiveMill">
    <div padding margin-bottom class="pt0">
      <ion-list class="item-list" margin-bottom>
        <ion-item-divider><span class="color-gray-light">账户余额</span></ion-item-divider>
        <account [readonly]="true" [refresh]="isRefresh"></account>
      </ion-list>
      <!--升级矿机-->
      <form *ngIf="isUpgradeMill" [formGroup]="upgradeMillValidateForm" (submit)="beforeUpgradeMill($event)">
        <ion-list margin-bottom margin-top>
          <ion-item-divider><span class="color-gray-light">升级矿机</span></ion-item-divider>
          <ion-item>
            <ion-label>要升级的矿机</ion-label>
            <ion-select formControlName="minerCode" placeholder="选择矿机" [cancelText]="'取消'" [okText]="'确定'" (ionChange)="selectedMiner($event)">
              <ion-option *ngFor="let miner of minerList" [value]="miner.code">
                算力：{{miner.power}}（价格：{{miner.price}}JLB）
                算力：{{miner.power}}（价格：{{miner.price}}）
              </ion-option>
            </ion-select>
          </ion-item>
          <div class="error-message"
               *ngIf="getUpgradeMillFormControl('minerCode').dirty&&getUpgradeMillFormControl('minerCode').errors">
            <ng-container *ngIf="getUpgradeMillFormControl('minerCode').hasError('required')">请选择要升级的矿机</ng-container>
          </div>

          <ion-item>
            <ion-label>支付方式</ion-label>
            <ion-select [cancelText]="'取消'" [okText]="'确定'" formControlName="payType" placeholder="选择支付方式">
              <ion-option *ngFor="let item of payTypes" [value]="item.key">{{item.val}}</ion-option>
            </ion-select>
          </ion-item>
          <div class="error-message"
               *ngIf="getUpgradeMillFormControl('payType').dirty&&getUpgradeMillFormControl('payType').errors">
            <ng-container *ngIf="getUpgradeMillFormControl('payType').hasError('required')">请选择支付方式</ng-container>
          </div>
        </ion-list>

        <!--<ng-container *ngIf="curSelectedMiner && getUpgradeMillFormControl('payType')?.value">
          <ion-list>
            <ion-item-divider><span class="color-gray-light">矿机价格</span></ion-item-divider>
            <ng-container *ngIf="getUpgradeMillFormControl('payType')?.value === enumStates.payType.jlb">
              <ion-item>
                <i class="icon iconfont icon-qianbi1" item-start></i>
                金兰宝
                <ion-note item-end class="color-orange">{{(curSelectedMiner.jlb || 0) | number: '1.2-2'}}</ion-note>
              </ion-item>
              <ion-item *ngIf="curSelectedMiner.isActiveCoin === enumStates.yes">
                <i class="icon iconfont icon-qianbi" item-start></i>
                激活币
                <ion-note item-end class="color-orange">{{(curSelectedMiner.active || 0) | number: '1.2-2'}}</ion-note>
              </ion-item>
            </ng-container>
            <ng-container *ngIf="getUpgradeMillFormControl('payType')?.value === enumStates.payType.jlbOre">
              <ion-item>
                <i class="icon iconfont icon-qianbi1" item-start></i>
                金兰宝
                <ion-note item-end class="color-orange">{{(curSelectedMiner.mixJlb || 0) | number: '1.2-2'}}</ion-note>
              </ion-item>
              <ion-item *ngIf="curSelectedMiner.isActiveCoin === enumStates.yes">
                <i class="icon iconfont icon-icon-zuanshi" item-start></i>
                矿石
                <ion-note item-end class="color-orange">{{(curSelectedMiner.mixOre || 0) | number: '1.2-2'}}</ion-note>
              </ion-item>
              <ion-item *ngIf="curSelectedMiner.isActiveCoin === enumStates.yes">
                <i class="icon iconfont icon-qianbi" item-start></i>
                激活币
                <ion-note item-end class="color-orange">{{(curSelectedMiner.mixActive || 0) | number: '1.2-2'}}</ion-note>
              </ion-item>
            </ng-container>
          </ion-list>
        </ng-container>-->
        <p class="color-thc">提示：实际将扣除两台矿机的差价</p>

        <ion-grid>
          <ion-row>
            <ion-col col-4>
              <button ion-button color="primary" type="button" block outline (click)="cancelUpgrade()">取消</button>
            </ion-col>
            <ion-col col-8>
              <button ion-button color="primary" block type="submit">确定</button>
            </ion-col>
          </ion-row>
          <ion-row>
          </ion-row>
        </ion-grid>
      </form>

      <!--复投矿机-->
      <form *ngIf="isReactiveMill" [formGroup]="reactiveMillValidateForm" (submit)="beforeReactiveMill($event)">
        <ion-list margin-bottom margin-top>
          <ion-item-divider><span class="color-gray-light">复投矿机</span></ion-item-divider>
          <ion-item>复投当前矿机</ion-item>
          <ion-item>
            <ion-label>支付方式</ion-label>
            <ion-select [cancelText]="'取消'" [okText]="'确定'" formControlName="payType" placeholder="选择支付方式">
              <ion-option *ngFor="let item of payTypes" [value]="item.key">{{item.val}}</ion-option>
            </ion-select>
          </ion-item>
          <div class="error-message"
               *ngIf="getReactiveMillFormControl('payType').dirty&&getReactiveMillFormControl('payType').errors">
            <ng-container *ngIf="getReactiveMillFormControl('payType').hasError('required')">请选择支付方式</ng-container>
          </div>
        </ion-list>
        <ion-list *ngIf="curSelectedMiner && getReactiveMillFormControl('payType')?.value">
          <ion-item-divider><span class="color-gray-light">矿机价格</span></ion-item-divider>
          <ng-container *ngIf="getReactiveMillFormControl('payType')?.value === enumStates.payType.jlb">
            <ion-item>
              <i class="icon iconfont icon-qianbi1" item-start></i>
              金兰宝
              <ion-note item-end class="color-orange">{{(curSelectedMiner.jlb || 0) | number: '1.2-2'}}</ion-note>
            </ion-item>
            <ion-item *ngIf="curSelectedMiner.isActiveCoin === enumStates.yes">
              <i class="icon iconfont icon-qianbi" item-start></i>
              激活币
              <ion-note item-end class="color-orange">{{(curSelectedMiner.active || 0) | number: '1.2-2'}}</ion-note>
            </ion-item>
          </ng-container>
          <ng-container *ngIf="getReactiveMillFormControl('payType')?.value === enumStates.payType.jlbOre">
            <ion-item>
              <i class="icon iconfont icon-qianbi1" item-start></i>
              金兰宝
              <ion-note item-end class="color-orange">{{(curSelectedMiner.mixJlb || 0) | number: '1.2-2'}}</ion-note>
            </ion-item>
            <ion-item *ngIf="curSelectedMiner.isActiveCoin === enumStates.yes">
              <i class="icon iconfont icon-icon-zuanshi" item-start></i>
              矿石
              <ion-note item-end class="color-orange">{{(curSelectedMiner.mixOre || 0) | number: '1.2-2'}}</ion-note>
            </ion-item>
            <ion-item *ngIf="curSelectedMiner.isActiveCoin === enumStates.yes">
              <i class="icon iconfont icon-qianbi" item-start></i>
              激活币
              <ion-note item-end class="color-orange">{{(curSelectedMiner.mixActive || 0) | number: '1.2-2'}}</ion-note>
            </ion-item>
          </ng-container>
        </ion-list>
        <ion-grid>
          <ion-row>
            <ion-col col-4>
              <button ion-button color="primary" type="button" block outline (click)="cancelReacttive()">取消</button>
            </ion-col>
            <ion-col col-8>
              <button ion-button color="primary" block type="submit">确定</button>
            </ion-col>
          </ion-row>
          <ion-row>
          </ion-row>
        </ion-grid>
      </form>
    </div>
  </ng-container>

</ion-content>
